<template>
  <div class="w-full h-full flex flex-col gap-2">
    <!-- Header -->
    <div
      class="px-4 py-2 text-lg font-semibold text-white text-center border-b border-gray-300"
      style="
        background-color: #3c3c3c;
        border: 2px solid #1c273a;
        box-shadow: 0 6px 20px rgba(255, 255, 255, 0.6);
      "
    >
      <template v-if="module === ModuleType.battle">战例场景管理</template>
      <template v-else-if="module === ModuleType.theme">场景主题服务</template>
      <template v-else-if="module === ModuleType.user">平台用户管理</template>
      <template v-else>请先选择模块</template>
    </div>

    <!-- Table Container -->
    <div
      class="flex-1 overflow-auto relative"
      style="
        background-color: #3c3c3c;
        border: 2px solid #1c273a;
        box-shadow: 0 6px 20px rgba(255, 255, 255, 0.6);
      "
    >
      <div v-if="!tableData || tableData.length === 0" class="empty-placeholder">
        <template v-if="tableData?.length === 0">暂无数据</template>
        <template v-else>请先选择模块</template>
      </div>
      <el-table
        v-else
        :data="tableData"
        class="w-full dark-table"
        header-cell-class-name="dark-header"
        cell-class-name="dark-cell"
        highlight-current-row
        @row-click="handleRowClick"
        @row-contextmenu="handleRowContextMenu"
      >
        <el-table-column prop="scene" label="战例场景" />
        <el-table-column prop="topic" label="主题" />
        <el-table-column prop="creator" label="创建人" />
        <el-table-column prop="date" label="创建日期" />
      </el-table>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ElMessage } from 'element-plus'
import { defineProps, onMounted, ref } from 'vue'
import { type DataItem } from '@/utils/ClassifyService'
import { ModuleType } from '@/sys-config/SystemConfig'

const tableData = ref([] as DataItem[] | undefined)

const props = defineProps<{
  data: DataItem[]
  module: ModuleType
}>()

// 点击行
function handleRowClick(row: any) {
  ElMessage(`你点击了：${row.scene}`)
}

// 右键行
function handleRowContextMenu(row: any, column: any, event: MouseEvent) {
  event.preventDefault()
  ElMessage(`你右键了：${row.scene}`)
}

onMounted(() => {
  tableData.value = props.data
})
</script>

<style scoped>
/* 占位提示样式 */
.empty-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #999;
  font-size: 16px;
}

/* 表头样式 */
:deep(.dark-header) {
  background-color: #2a2a2a !important;
  color: #ffffff !important;
  font-weight: bold;
}

/* 表体单元格样式 */
:deep(.dark-cell) {
  background-color: #3c3c3c !important;
  color: #ffffff !important;
}

/* 无边框表格 */
:deep(.el-table__inner-wrapper),
:deep(.el-table),
:deep(.el-table__body-wrapper),
:deep(.el-table__header-wrapper) {
  border: none !important;
}

/* 去掉行边框 */
:deep(.el-table td),
:deep(.el-table th.is-leaf) {
  border-bottom: none !important;
}

/* 悬浮高亮行 */
:deep(.el-table__body tr:hover > td) {
  background-color: #505050 !important;
  cursor: pointer;
}
</style>
